<template>
  <div>
    <el-tree
      :data="treeNode"
      :props="defaultProps"
      node-key="catId"
      :default-expand-all="false"
      :render-after-expand="true"
      :expand-on-click-node="true"
      :highlight-current="true"
      @node-click="nodeClick"
      ref="categoryTree"
    >
      <!--            :default-expanded-keys="expandedKeys"
      -->
    </el-tree>
  </div>
</template>

<script>
import categoryApi from '../../../api/categoryApi'

export default {
  name: 'categoryTree',
  props: ['hub'],
  data () {
    return {
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      treeNode: [],
      localHub: null
    }
  },
  methods: {
    getCategoryTree () {
      categoryApi.getCategoryTree().then(({data}) => {
        this.treeNode = data.treeCategoryList.children
        // console.log(this.treeNode)
      })
    },
    /**
     * 节点被点击时的回调
     * 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
     */
    nodeClick (data, node, nodeSelf) {
      //console.log('当前点击', data, node, nodeSelf)

      //this.$emit('click-third-level-category', node)

      this.localHub.$emit('change-category-id', data, node, nodeSelf)

    }
  },
  created () {
    this.getCategoryTree()
  },
  /**
   * 方法中不能通过 this.hub 直接调用父组件传递过来的属性，直接转为本组件的属性
   * */
  watch: {
    hub (val) {
      //console.log("categoryTree中的hub监视器",val)
      if (val) {
        this.localHub = val;
        // console.log("categoryTree中的hub已经初始化",val);
      }
    }
  }

}
</script>

<style scoped>

</style>
